<template>
  <el-dialog
    v-model="visible"
    title="征集参与者详情"
    :close-on-click-modal="false"
    style="width: 80%;"
  >
    <el-form label-width="90px">
      <div class="main">
        <div class="content">
          <div class="order-number">
            <el-row :gutter="24">
              <el-col :span="12">
                <el-form-item label="活动标题:">
                  <span class="text">{{ dataInfo.title }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <h3>一、基本信息</h3>
            <el-row :gutter="24">
              <el-col v-if="dataInfo.template.province" :span="8">
                <el-form-item label="省:">
                  <span class="text">{{ dataInfo.apply.provinceTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="dataInfo.template.city" :span="8">
                <el-form-item label="市:">
                  <span class="text">{{ dataInfo.apply.cityTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="dataInfo.template.area" :span="8">
                <el-form-item label="区/县:">
                  <span class="text">{{ dataInfo.apply.areaTitle }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col v-if="dataInfo.template.categoryType" :span="6">
                <el-form-item label="类别:">
                  <span class="text">{{ dataInfo.apply.categoryTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="dataInfo.template.groupType" :span="6">
                <el-form-item label="组别:">
                  <span class="text">{{ dataInfo.apply.groupTitle }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="dataInfo.template.entrants" :span="6">
                <el-form-item label="参赛对象:">
                  <span class="text">{{ dataInfo.apply.entrants }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="dataInfo.template.workshop" :span="6">
                <el-form-item label="工作坊名称:">
                  <span class="text">{{ dataInfo.apply.workshop }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col v-if="dataInfo.template.name" :span="6">
                <el-form-item label="姓名:">
                  <span class="text">{{ dataInfo.apply.name }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="dataInfo.template.cardId" :span="6">
                <el-form-item label="身份证:">
                  <span class="text">{{ dataInfo.apply.cardId }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="dataInfo.template.phone" :span="6">
                <el-form-item label="手机号:">
                  <span class="text">{{ dataInfo.apply.phone }}</span>
                </el-form-item>
              </el-col>
              <el-col v-if="dataInfo.template.email" :span="6">
                <el-form-item label="邮箱:">
                  <span class="text">{{ dataInfo.apply.email }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <h3>二、报名材料</h3>
            <el-row :gutter="24">
              <el-col v-if="dataInfo.template.file" :span="8">
                <el-form-item label="报名表:">
                  <mul-file-upload
                    style="width: 100%"
                    v-model="dataInfo.fileList"
                    :btnVisible="false"
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="dataInfo.template.video" :span="8">
                <el-form-item label="参赛视频:">
                  <mul-file-upload
                    style="width: 100%"
                    v-model="dataInfo.videoList"
                    :btnVisible="false"
                  />
                </el-form-item>
              </el-col>
              <el-col v-if="dataInfo.template.image" :span="8">
                <el-form-item label="作品照片:">
                  <mul-file-upload
                    style="width: 100%"
                    v-model="dataInfo.imageList"
                    :btnVisible="false"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="visible = false">
          取消
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>

const emit = defineEmits(['refreshDataList'])
const dataForm = ref({
  id: null,
  score: 0,
  approval: 0,
  status: 0
})
const dataInfo = ref({
  title: "",
  apply: {},
  template: {},
  fileList: [],
  videoList: [],
  imageList: []
})
const visible = ref(false)

/**
 * 获取数据列表
 */
const init = (id) => {
  visible.value = true
  dataForm.id = id || 0
  if (dataForm.id) {
    // 修改
    http({
      url: http.adornUrl(`/admin/submissions/apply/info/${id}`),
      method: 'get',
      params: http.adornParams()
    })
      .then(({data}) => {
        dataInfo.value = data
      })
  }
}
defineExpose({init})

</script>
<style scoped lang="scss">
.main {
  height: 100%;
  width: 100%;
  font: 14px Arial, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  color: #495060;
}

.content {
  margin: 0 20px;

  .order-state {
    position: relative;
    margin-top: 50px;
    border-bottom: 1px solid #e9eaec;
  }
}

.order-number {
  .text {
    font-size: 14px;
    color: #8a8a8a;
  }
}
</style>
